<template>
  <div class="demo">
    <div class="demo-title">幽灵折叠面板</div>
    <div class="demo-content">
      <Collapse v-model:activeKey="activeKey" ghost>
        <Collapse.Panel key="1" header="This is panel header 1">
          <p>{{ text }}</p>
        </Collapse.Panel>
        <Collapse.Panel key="2" header="This is panel header 2">
          <p>{{ text }}</p>
        </Collapse.Panel>
        <Collapse.Panel key="3" header="This is panel header 3" collapsible="disabled">
          <p>{{ text }}</p>
        </Collapse.Panel>
      </Collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Collapse from '@sscd/collapse';
  const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
  const activeKey = ref(['1']);
  watch(
    () => activeKey,
    (val) => console.log(val)
  );
</script>
